import React from 'react';
import Item from './components/caseItem'
import useTitle from '../../hooks/useTitle';
import axios from 'axios';
import HOST from '../../utils/const';
import { useState, useEffect } from 'react'
import './index.css';

function Study() {
  useTitle(Study.title);
  const [detail, setDetail] = useState([]);
  const [content, setContent] = useState([]);
  const [pageSize, setPageSize] = useState(3);
  const [pageNum, setPageNum] = useState(1);
  const [currentInfo, setCurrentInfo] = useState(getCurrentInfo());
  useEffect(()=>{
    axios.get(HOST+`/method/monitor?case=4`).then((res)=>{
      switch (res.data.split('\n')[0]) {
        case 'code=20': {
          const res1 = getContent(res.data.split('\n'));
          setDetail(res1.title);
          setContent(res1.res);
          console.log(res1.res);
          break;
        }
        default: {
          alert('未知错误');
          break;
        }
      }
    }).catch((err)=>{
      console.log(err);
    });
  },
  [])
  function getContent(str){
    const res = [];
    const title = [];
    for(let i=1;i<str.length;i++){
      str[i] && title.push(str[i].split('\t')[0]);
      str[i] && res.push([str[i].split('\t')[0],str[i].split('\t')[1].split('$')])
    }
    return {res, title};
  }
  function getCurrentInfo() {
    return detail.slice(pageSize * (pageNum - 1), pageSize * pageNum);
  }
  function updateCurrentInfo(size, num) {
    const res = detail.slice(pageSize * (num - 1), pageSize * num);
    if (res.length === 0) {
      const lastPage = Math.ceil(detail.length / pageSize);
      console.log(lastPage)
      setPageNum(lastPage);
      setPageSize(size)
    } else {
      setPageSize(size);
      setPageNum(num);
    }
  }

  function nextPage() {
    const lastPage = Math.ceil(detail.length / pageSize);
    if (pageNum === lastPage) {
      return
    }
    setPageNum(pageNum + 1)
  }

  function lastPage() {
    setPageNum(pageNum - 1)
  }

  useEffect(() => {
    setCurrentInfo(getCurrentInfo());
    // eslint-disable-next-line
  }, [pageSize, pageNum, detail, content])
  return (
    <div className='study'>
      <div className='study-topbar'>
      </div>
      <div className='study-detail'>
        <div className='study-detail-topbar'>
          <div className='detail-casename'>病例名</div>
          <div className='detail-operation'>操作</div>
        </div>
        {currentInfo.map((item, index) => <Item detail={item} key={item} id={index + (pageNum-1)*pageSize} content={content}/>)}
        <div className='study-detail-footbar'>
          <div className='case-total'>共 {detail.length} 条</div>
          <div className='case-pagesize'>
            <select className='pagesize-select' name='pagesize' id='pagesize' onChange={() => {
              updateCurrentInfo(Number(document.getElementById("pagesize").value), pageNum)
            }}>
              <option value="3">3条/页</option>
              <option value="6">6条/页</option>
              <option value="10">10条/页</option>
            </select>
          </div>
          <div className='change-page'>
            <div className='last-page'>
              <div className='left-arrow' onClick={lastPage}></div>
            </div>
            <div className='current-page'>{pageNum}</div>
            <div className='next-page'>
              <div className='right-arrow' onClick={nextPage}></div>
            </div>
          </div>
          <div className='goto-page'>
            前往<input type="text" id='target-page' onBlur={
              (e) => {
                const res = Number(e.target.value)
                console.log(res);
                if (Number.isInteger(res)) {
                  const target = Math.round(res);
                  updateCurrentInfo(pageSize, target)
                }
              }
            } />页
      </div>
        </div>
      </div>
    </div>
  );
}

Study.path = '/study';
Study.title = '学习病例';
Study.meta = {
  keywords:
    '学习病例',
  description:
    '宠物医院 学习知识'
};
Study.exact = true;

export default Study;
